<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-16 14:28:23
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-03-05 15:16:57
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\dishmana\dishbom\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dishbom">
    <searchCard @onSearch="searchFn" @onReset="resetFn">
      <el-form :model="dishbomForm" label-width="auto" inline @keyup.enter="searchFn">
        <el-form-item label="菜品编码：">
          <pb-input v-model="dishbomForm.dishCode" placeholder="请输入菜品编码"></pb-input>
        </el-form-item>
        <el-form-item label="菜品名称：">
          <pb-input v-model="dishbomForm.dishName" placeholder="请输入菜品名称"></pb-input>
        </el-form-item>
        <el-form-item label="SPU名称：">
          <pb-input v-model="dishbomForm.spuName" placeholder="请输入SPU名称"></pb-input>
        </el-form-item>
        <el-form-item label="供餐模式：">
          <pb-check :list="priList" @change="SetpricingFn($event)"></pb-check>
        </el-form-item>
      </el-form>
    </searchCard>
    <div class="flex-1">
      <pb-card padding="0" height="100%">
        <div class="content-box">
          <ContentOperation>
            <pb-button size="small" plain class="operaleftbtn" v-hasPerm="'center:dishbom:import'">BOM导入</pb-button>
            <pb-button size="small" plain v-hasPerm="'center:dishbom:export'">导出</pb-button>
          </ContentOperation>
          <div class="table-box flex">
            <div class="left-tree-box">
              <pb-tree :style="{ maxHeight: treeH }" :treeData="treeData" :defaultProps="treeProps"
                @nodeClick="nodeClick"></pb-tree>
            </div>
            <div class="table-right">
              <div class="flex">
                <div class="tdstop1"><span>菜品基础信息</span></div>
                <div class="tdstop2"><span>主料(份)</span></div>
                <div class="tdstop3"><span>辅料(份)</span></div>
                <div class="tdstop4"><span>调料(份)</span></div>
                <div class="tdstop5"><span>操作</span></div>
              </div>
              <pb-table :column="bomColumn" :tableData="dishbomData" :spanMethod="spanMethod" :indexWidth="60"
                :cellPadding="6" :border="true" :bottomElement="['pb-page']" :indexshow="false">
                <template #mainBomRecoveryRate="{ row }">
                  {{ row.mainBomRecoveryRate ? row.mainBomRecoveryRate + '%' : '' }}
                </template>
                <template #auxiliaryBomRecoveryRate="{ row }">
                  {{ row.auxiliaryBomRecoveryRate ? row.auxiliaryBomRecoveryRate + '%' : '' }}
                </template>
                <template #seasoningBomRecoveryRate="{ row }">
                  {{ row.seasoningBomRecoveryRate ? row.seasoningBomRecoveryRate + '%' : '' }}
                </template>
                <template #operate="{ row }">
                  <div class="flex">
                    <div v-hasPerm="'center:dishbom:edit'">
                      <pb-button size="small" text @click="editBomfn(row)">编辑</pb-button>
                      <p class="divider mr-2 ml-2"></p>
                    </div>
                    <!-- <pb-button text @click="setisVisibleFn(row)">菜品信息</pb-button>
              <p class="divider mr-2 ml-2"></p> -->
                    <div v-hasPerm="'center:dishbom:delete'">
                      <PopconfirmButton @confirm="deleteBomfn(row)">
                      </PopconfirmButton>
                    </div>

                  </div>
                </template>
              </pb-table>
              <pb-pagination v-model:currentPage="pageObj.currentPage" v-model:pageSize="pageObj.pageSize"
                @onChange="currentChange" :total="pageObj.total"></pb-pagination>
            </div>
          </div>
        </div>
      </pb-card>
    </div>
    <!-- <pb-card height="100%" width="100%" padding="0">
      <ContentOperation>
        <pb-button size="small" plain class="operaleftbtn">BOM导入</pb-button>
        <pb-button size="small" plain>导出</pb-button>
      </ContentOperation>
      <div class="flex h-100%">
        <div class="left-tree-box">
          <pb-tree class="tree" :treeData="treeData" :defaultProps="treeProps" @nodeClick="nodeClick"></pb-tree>
        </div>
        <div class="table-right">
          <div class="flex">
            <div class="tdstop1"><span>菜品基础信息</span></div>
            <div class="tdstop2"><span>主料(份)</span></div>
            <div class="tdstop3"><span>辅料(份)</span></div>
            <div class="tdstop4"><span>调料(份)</span></div>
            <div class="tdstop5"><span>操作</span></div>
          </div>
          <pb-table :column="bomColumn" :tableData="dishbomData" :spanMethod="spanMethod" :indexWidth="60"
            :cellPadding="6" :border="true" :bottomElement="['pb-page']" :indexshow="false">
            <template #mainBomRecoveryRate="{ row }">
              {{ row.mainBomRecoveryRate ? row.mainBomRecoveryRate + '%' : '' }}
            </template>
            <template #auxiliaryBomRecoveryRate="{ row }">
              {{ row.auxiliaryBomRecoveryRate ? row.auxiliaryBomRecoveryRate + '%' : '' }}
            </template>
            <template #seasoningBomRecoveryRate="{ row }">
              {{ row.seasoningBomRecoveryRate ? row.seasoningBomRecoveryRate + '%' : '' }}
            </template>
            <template #operate="{ row }">
              <pb-button text @click="editBomfn(row)">编辑</pb-button>
              <p class="divider mr-2 ml-2"></p>
              <PopconfirmButton @confirm="deleteBomfn(row)"></PopconfirmButton>
            </template>
          </pb-table>
          <pb-pagination v-model:currentPage="pageObj.currentPage" v-model:pageSize="pageObj.pageSize"
            @onChange="currentChange" :total="pageObj.total"></pb-pagination>
        </div>
      </div>
    </pb-card> -->
    <!-- <pb-drawer v-model="isVisible" :title="'查看食品信息'" :direction="'btt'" :size="'92%'" @cancelFn="CancelFn"
      @confirmFn="confirmFn" v-if="isVisible">
      <div class="flex drawerdiv">
        <div class="left">
          <img :src="Bomdetails.pic" alt="">
        </div>
        <div class="center1">
          <div>
            <div><span>菜品编码：</span><span>{{ Bomdetails.dishCode }}</span></div>
            <div><span>助记码：</span><span>{{ Bomdetails.mnemonicCode }}</span></div>
            <div><span>技法：</span><span>{{ Bomdetails.skill }}</span></div>
            <div><span>原料类别：</span><span>{{ Bomdetails.materialCategory }}</span></div>
          </div>
          <div class="m-tb">
            <div><span>菜品名称：</span><span>{{ Bomdetails.dishName }}</span></div>
            <div><span>生熟比：</span><span>{{ Bomdetails.curingRate }}</span></div>
            <div><span>口味：</span><span>{{ Bomdetails.taste }}</span></div>
            <div class="warps"><span>标签：</span>
              <div class="lists">
                <div v-for="(ele, index) in Bomdetails.dishTargetAttributeNames" :key="index">
                  {{ ele }}
                </div>
              </div>
            </div>
          </div>
          <div>
            <div><span>菜品分类：</span><span>{{ Bomdetails.dishTypeName }}</span></div>
            <div><span>份重(熟)：</span><span>{{ Bomdetails.dishWeight }}</span></div>
            <div><span>用途：</span><span>{{ Bomdetails.dishUseScopeName }}</span></div>
          </div>
        </div>
        <div class="videos">
          <div class="title">工艺视频：</div>
          <Videos class="vmp4" :videoSrc="videoUrl" width="136" height="74"></Videos>
        </div>
        <div class="right">
          <div class="title">
            烹饪方法：
          </div>
          <div>
            {{ Bomdetails.cookingMethods }}
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="定价信息" name="first">
          <Prcinfo :Bomdata="Bomdata" />
        </el-tab-pane>
        <el-tab-pane label="Bom信息" name="second">
          <Bominfo :Bomdata="Bomdata" />
        </el-tab-pane>
        <el-tab-pane label="耗材BOM" name="third">
          <Consum :Bomdata="Bomdata">
          </Consum>
        </el-tab-pane>
        <el-tab-pane label="历史定价" name="fourth">
          <HistoryPic :Bomdata="Bomdata">

          </HistoryPic>
        </el-tab-pane>
      </el-tabs>
      <template #footer></template>
    </pb-drawer> -->
    <Edit :isVisibles="EditisVisible" :Bomdata="Bomdata" @OffEdit="OffEdit" @sendedit="sendedit" v-if="EditisVisible" />
  </div>
</template>

<script lang="ts" setup>
import videoUrl from '@/assets/images/devceshi.mp4';
import Prcinfo from './components/prcinfo.vue'
import Bominfo from './components/bominfo.vue'
import Edit from './components/editbom.vue'
import Consum from './components/Consuminfo.vue'
import HistoryPic from './components/historypic.vue'
import { GetBomPageListApi, getDishTypeApi, GttDishBomDetalApi, deleteDishApi, GetDishTypeValueListApi } from '@/api/Dashmana'
const Bomdetails = ref({} as any)
const treeData = ref([] as any)
const treeProps = { children: "children", label: "dishTypeName" };
const isVisible = ref(false)
const activeName = ref('first')
let cellList: any[] = [] // 单元格数组
let count: number = 0 // 计数
const clearObjKey = (clearForm: any) => {
  Object.keys(clearForm).forEach((key: any) => {
    if (Array.isArray(clearForm[key])) {
      // 如果属性是数组，则清空数组
      clearForm[key].length = 0;
    } else {
      // 如果属性不是数组，则设置为默认值（默认为空字符串）
      clearForm[key] = '';
    }
  });
}
const nodeClick = (data: any) => {
  console.log(data.curNode)
  dishbomForm.dishTypeCode = data.curNode.dishTypeCode
  getDataFn()
};
const Bomdata = reactive({} as any)
const EditisVisible = ref(false)
const editBomfn = (row: any) => {
  Bomdata.dishName = row.dishName
  Bomdata.dishId = row.dishId
  Bomdata.dishCode = row.dishCode
  Bomdata.isFlage = row.isFlage
  EditisVisible.value = true
}
const sendedit = () => {
  getDataFn()
  EditisVisible.value = false
}
const OffEdit = () => {
  getDataFn()
  EditisVisible.value = false
}
const CancelFn = () => {
  isVisible.value = false
}
const confirmFn = () => {
  isVisible.value = false
}
const deleteBomfn = (row: any) => {
  deleteDishApi({
    dishId: row.dishId
  }).then(res => {
    getDataFn()
  })
}
let treeH = ref(null)
const getNodeDishType = () => {
  getDishTypeApi({
    type: 'weight'
  }).then(res => {
    treeData.value.push({
      dishTypeCode: '',
      dishTypeName: '全部',
      children: res.data
    })
    getDataFn()

    var height = document.getElementsByClassName("pb-table");
    treeH.value = height[0].offsetHeight + "px";

    window.addEventListener("resize", () => {
      height = document.getElementsByClassName("pb-table");

      treeH.value = height[0].offsetHeight + "px";
    });
  })
}
const handleClick = () => {

}
const computeCell = (tableList: any[]) => {
  cellList = []
  count = 0
  for (let i = 0; i < tableList.length; i++) {
    if (i === 0) {
      // 先设置第一项
      cellList.push(1); // 初为1，若下一项和此项相同，就往cellList数组中追加0
      count = 0; // 初始计数为0
    } else {
      if (tableList[i].dishId == tableList[i - 1].dishId) {
        cellList[count] += 1; // 增加计数
        cellList.push(0); // 相等就往cellList数组中追加0
      } else {
        cellList.push(1); // 不等就往cellList数组中追加1
        count = i; // 将索引赋值为计数
      }
    }
  }
}


const spanMethod = ({
  rowIndex,
  columnIndex,
}: any) => {
  computeCell(dishbomData.value)
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === bomColumn.length - 1) {
    const fRow = cellList[rowIndex]
    const fCol = fRow > 0 ? 1 : 0
    return {
      rowspan: fRow, // 合并的行数
      colspan: fCol // 合并的列数，为0表示不显示
    }
  }
}
const dishbomForm = reactive({
  dishCode: '',
  dishName: '',
  spuName: '',
  dishTypeCode: '',
  useScopeAttributeId: null
})
const pageObj = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})

const setisVisibleFn = (row: any) => {
  console.log(row, '11')
  Bomdata.dishName = row.dishName
  Bomdata.dishId = row.dishId
  Bomdata.dishCode = row.dishCode
  GttDishBomDetalApi({ dishCode: row.dishCode }).then((res: any) => {
    Bomdetails.value = res.data
  })
  isVisible.value = true;

}
const sizeChange = () => {
}
const currentChange = () => {
  getDataFn()
}
const bomColumn = reactive([
  {
    key: 'index',
    name: '序号',
    width: 38,
  },
  {
    key: "dishCode",
    width: 45,
    name: "编码",
    align: "right",
  },
  {
    key: "dishName",
    width: 40,
    name: "名称",
  },
  {
    key: "dishTypeName",
    width: 40,
    name: "分类",
  },
  {
    key: 'dishUseScopeName',
    name: '供餐模式',
    width: 50,
  }, {
    key: "dishWeight",
    name: "份重(熟)",
    width: 45,
    align: "right",
  }, {
    key: "mainSpuName",
    name: "SPU名称",
    width: 55,
  }, {
    width: 50,
    key: "mainBomWeight",
    name: "下料量(g)",
    align: "right",
  }, {
    width: 40,
    slot: "mainBomRecoveryRate",
    name: "出成率%",
    align: "right",
  }, {
    width: 50,
    key: "auxiliarySpuName",
    name: "SPU名称",
  }, {
    width: 55,
    key: "auxiliaryBomWeight",
    name: "下料量(g)",
    align: "right",
  }, {
    slot: "auxiliaryBomRecoveryRate",
    name: "出成率%",
    width: 50,
    align: "right",
  },
  {
    width: 50,
    key: "seasoningSpuName",
    name: "SPU名称",
  }, {
    width: 50,
    key: "seasoningBomWeight",
    name: "下料量(g)",
    align: "right",
  }, {
    slot: "seasoningBomRecoveryRate",
    name: "出成率%",
    width: 40,
    align: "right",
  },
  {
    slot: "operate",
    name: "操作",
    width: 70
  },
]);
const dishbomData = ref([] as any)
const searchFn = () => {
  getDataFn()
}
const resetFn = () => {
  clearObjKey(dishbomForm)
  dishbomForm.useScopeAttributeId = null
  priList.value.map(el => {
    el.checked = false
  })
  priList.value[0].checked = true
  getDataFn()
}
const SetpricingFn = (el: any) => {
  dishbomForm.useScopeAttributeId = el.val
  getDataFn()
}
const getDataFn = () => {
  dishbomData.value.length = 0
  GetBomPageListApi({
    "currentPage": pageObj.currentPage,
    "pageSize": pageObj.pageSize,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ], ...dishbomForm
  }).then((res: any) => {
    // dishbomData.value = res.data.records
    let Bomdata = res.data.records
    if (Bomdata.length > 0) {
      Bomdata.forEach((ele: any, index: number) => {
        if (ele.dishBomFoodVOList && ele.dishBomFoodVOList.length > 0) {
          ele.dishBomFoodVOList.forEach((el: any) => {
            el.index = index + 1
            dishbomData.value.push(Object.assign(el, ele))
          })
        } else {
          ele.index = index + 1
          dishbomData.value.push(ele)
        }
      })
    }
    pageObj.total = res.data.total
  })
}
const priList = ref([{
  label: '全部',
  val: '',
}] as any)
onMounted(() => {
  getNodeDishType()
  GetDishTypeValueListApi({
    "currentPage": 0,
    "pageSize": -1,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ],
    "dishAttributeType": ""
  }).then((res) => {
    res.data.records.forEach((el: any) => {

      if (el.dishAttributeType == 'scope') {
        priList.value.push({
          label: el.dishAttributeValue,
          val: el.dishAttributeValueId,
          checked: false
        })
      }
      priList.value[0].checked = true
    })
  })
  if (sessionStorage.getItem('dishmanageObj')) {
    let parmas = JSON.parse(sessionStorage.getItem('dishmanageObj'))
    sessionStorage.removeItem('dishmanageObj')
    editBomfn({ ...parmas, isFlage: true })
  }
})
</script>

<style lang="scss" scoped>
::v-deep thead th {
  background: #F5F5F5 !important;
  padding: 9px 5px !important;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.dishbom {
  .left-tree-box {
    width: 15.6%;
  }

  .table-right {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;

    .ceshi {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .Frompopup {
    .top {
      margin-top: 8px;

      span:first-child {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.65);
        font-style: normal;
        text-transform: none;
      }

      span:last-child {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        font-style: normal;
        text-transform: none;
      }
    }

    .footers {
      margin-bottom: 8px;
    }
  }

  .operaleftbtn {
    margin-right: 24px;
  }

  .drawerdiv {
    .left {
      margin-right: 16px;
      margin-bottom: 48px;

      img {
        width: 104px;
        height: 104px;
      }
    }

    .center1 {
      width: 744px;

      .m-tb {
        margin: 16px 0;
      }

      >div {
        display: flex;

        >div:first-child {
          width: 25%
        }

        >div:nth-child(2) {
          width: 25%
        }

        >div:nth-child(3) {
          width: 22%
        }

        >div:nth-child(4) {
          flex: 1;
        }

        >div {

          >span:first-child {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.65);
            font-style: normal;
            text-transform: none;
          }

          >span:last-child {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-style: normal;
            text-transform: none;
          }
        }
      }

      // margin-right: 40px;
    }

    .videos {
      border-left: 1px solid rgba(0, 0, 0, 0.10);
      border-right: 1px solid rgba(0, 0, 0, 0.10);
      text-indent: 40px;

      .vmp4 {
        width: 136px;
        height: 74px;
        margin: 0 40px;

      }
    }

    .right {
      padding: 0 0 0 40px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      text-transform: none;
    }

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
      font-style: normal;
      text-transform: none;
    }
  }

  .tdstop1 {
    // background: #0D968B;
    color: #fff;
    width: 33.9%;
    border-bottom: 1px solid #0D968B;

    >span {
      display: inline-block;
      padding: 0 8px;
      background: #0D968B;
    }
  }

  .tdstop2 {
    color: #fff;
    width: 18.7%;
    border-bottom: 1px solid #5B8FF9;

    >span {
      display: inline-block;
      padding: 0 8px;
      background: #5B8FF9;
    }
  }

  .tdstop3 {
    color: #fff;
    width: 20.2%;
    border-bottom: 1px solid #F6BD16;

    >span {
      display: inline-block;
      padding: 0 8px;
      background: #F6BD16;
    }
  }

  .tdstop4 {
    color: #fff;
    width: 18.1%;
    border-bottom: 1px solid #61DDAA;

    >span {
      display: inline-block;
      padding: 0 8px;
      background: #61DDAA;
    }
  }

  .tdstop5 {
    flex: 1;
    color: #fff;
    border-bottom: 1px solid #65789B;

    >span {
      display: inline-block;
      padding: 0 8px;
      background: #65789B;
    }
  }

  .warps {
    position: relative;

    .lists {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      left: 50px;
      top: -10px;

      // top: 3px;
      // width: 150px;
      >div {
        color: #0D968B;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #2BD4BD;
        padding: 0 4px;
        margin-right: 8px;
        margin-top: 10px;
      }
    }
  }
}
</style>
